<template>
    <div class="register-container">
      <el-form :model="registerForm" ref="registerForm" label-width="100px" class="register-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-link @click="navigateToLogin">已有账号？登录</el-link>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElForm, ElFormItem, ElInput, ElButton, ElLink } from 'element-plus';
  
  export default {
    components: { ElForm, ElFormItem, ElInput, ElButton, ElLink },
    setup() {
      const router = useRouter();
      const registerForm = ref({
        username: '',
        email: '',
        password: ''
      });
  
      const handleRegister = () => {
        console.log('Register:', registerForm.value);
      };
  
      const navigateToLogin = () => {
        router.push('/');
      };
  
      return {
        registerForm,
        handleRegister,
        navigateToLogin
      };
    }
  };
  </script>
  
  <style scoped>
  .register-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .register-form {
    margin-top: 20px;
  }
  
  .el-link {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
  </style>
  